<template>
	<view class="content">
		<view class="me-top">
			<view class="top-m-icon" :style="{ top }" hover-class="hover-opacity" @tap="navTo('/pages/public/message',{login:true})">
				<view class="" style="position: relative;">
					<u-icon name="/static/img/xxb.png" size="38"></u-icon>
					<!-- <view class="top-m-r"></view> -->
				</view>
			</view>
			<image src="/static/img/bg66.png" mode="" class="top-img"></image>
			<view class="me-info-con row" :style="{top:htop}" @tap="navTo('/pages/public/userInfo', { login: true })">
				<view class="user-icon"><u-avatar :src="userInfo.icon" size="102"></u-avatar></view>
				<view class="fill" style="margin-left:30upx;">
					<view class=" row">
						<text class="uesr-name" style="margin-right: 20upx;">{{ userInfo.name ? userInfo.name : '点击登录' }}</text>
						<view class="v-c row center" v-if="userInfo.isVip==1">
							<u-icon name="/static/img/hj.png" size="57"></u-icon>
							<text style="margin-right: 10rpx;">会员标识</text>
						</view>
					</view>
					<view class="uesr-phone" style="padding-top: 10upx;" v-if="userInfo.phone">{{userInfo.phone|phone}}</view>
				</view>
			</view>
			<view class="user-bot" @tap="navTo(`/pages/public/topUp`,{login:true})">
				<image src="/static/img/bg.png" mode="" class="middle-img"></image>
				<view class="user-bot-info"></view>
			</view>
		</view>
		<view class="orde-con" style="margin-top: 30upx;">
			<view class="order-title b-b" style="padding:0 30upx 30upx;">我的钱包</view>
			<view class="row" style="padding: 30upx;">
				<view class="fill column" @tap="navTo(`/pages/public/wallet`,{login:true})">
					<view class="r-m">{{userInfo.balance?userInfo.balance:"0"}}</view>
					<view class="r-t">余额(元)</view>
				</view>
				<view class="fill column" @tap="navTo(`/pages/compline/index`,{login:true})">
					<view class="r-m">{{userInfo.couponCount?userInfo.couponCount:"0"}}</view>
					<view class="r-t">代金券</view>
				</view>
				<view class="fill column" @tap="navTo(`/pages/point/integral?integral=${userInfo.integral}`,{login:true})">
					<view class="r-m">{{userInfo.integral?userInfo.integral:"0"}}</view>
					<view class="r-t">积分</view>
				</view>
			</view>
		</view>

		<view class="orde-con">
			<view class="order-title b-b" style="padding:0 30upx 30upx;">更多服务</view>
			<view class="row">
				<view class="fill column" hover-class="hover-dark" style="padding:30upx 0;" @tap="navTo('/pages/address/myAddress',{login:true})">
					<image src="/static/img/shdz.png" class="row-nav-item-icon1"></image>
					<text class="row-nav-item-text">地址管理</text>
				</view>
				<view class="fill column" hover-class="hover-dark" style="padding:30upx 0;" @tap="navTo('/pages/public/notice',{login:true})">
					<image src="/static/img/xx.png" class="row-nav-item-icon1"></image>
					<text class="row-nav-item-text">我的消息</text>
				</view>
				<view class="fill column" hover-class="hover-dark" style="padding:30upx 0;" @tap="navTo('/pages/public/card',{login:true})">
					<image src="/static/img/yqhy.png" class="row-nav-item-icon1"></image>
					<text class="row-nav-item-text">邀请好友</text>
				</view>
				<view class="fill column" hover-class="hover-dark" style="padding:30upx 0;" @tap="navTo(`/pages/leader/index?commission=${userInfo.commission}`,{login:true})" v-if="userInfo.isTz && userInfo.isTz==1">
					<image src="/static/img/tz.png" class="row-nav-item-icon1"></image>
					<text class="row-nav-item-text">团长中心</text>
				</view>
			</view>
		</view>
		<view class="orde-con">
			<u-grid :col="4" :border="false">
				<u-grid-item v-for="(v, k) in dataList" :key="k" @tap="userClick(v)">
					<image :src="v.icon" class="row-nav-item-icon"></image>
					<text class="row-nav-item-text">{{ v.name }}</text>
					<button open-type="contact" v-if="k == 2" class="contact-btn"></button>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="orde-con row center" hover-class="hover-dark" style="font-size: 30upx;font-weight: bold;color: #2781A7;" @tap="showAction">400客服 400-258-7895</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			top: uni.getSystemInfoSync().statusBarHeight + 10 + 'px',
			htop:uni.getSystemInfoSync().statusBarHeight + 48 + 'px',
			userInfo: {},
			dataList: [
				{ icon: '/static/img/yjfk.png', name: '意见反馈', url: '/pages/public/finker', login: false },
				{ icon: '/static/img/cj.png', name: '常见问题', url: '/pages/public/help', login: false },
				{ icon: '/static/img/zxkf.png', name: '在线客服' },
				{ icon: '/static/img/ptxy.png', name: '平台协议', url: '/pages/public/serveList', login: false }
			]
		};
	},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		showAction(){
			let phone=this.userInfo.customerPhone;
			uni.showActionSheet({
				itemList:[phone,"呼叫"],
				success:res=>{
					this.callphone(phone);
				}
			})
		},
		userClick(item) {
			if (item.url) {
				this.navTo(item.url, { login: item.login });
			}
		},
		async getUserInfo() {
			if (!uni.getStorageSync('uid')) return;
			const res = await this.$request('user/info', { uid: uni.getStorageSync('uid')});
			if (res.result == 0) {
				this.userInfo = res.data;
				getApp().globalData.userInfo=res.data;
			}
		}
	}
};
</script>
<style>
page {
	background: #f6f6f6;
}
</style>

<style lang="scss">
.v-c {
	width: 167upx;
	height: 38upx;
	background:rgba(164, 196, 210, 0.5);
	border-radius: 19upx;
	text{
		font-size: 20upx;
		color: #FFFFFF;
	}
}
.r-m {
	font-size: 33upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
}
.r-t {
	font-size: 22upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	padding-top: 10upx;
}
.order-title {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
}
.contact-btn {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
}
.orde-con {
	padding: 30upx 0;
	background: #ffffff;
	width: 700upx;
	margin: 0 auto 20upx;
	border-radius: 15upx;
}
.top-m-icon {
	position: absolute;
	left: 30upx;
	z-index: 99;
}
.top-m-r {
	position: absolute;
	right: -5upx;
	top: -5upx;
	width: 10upx;
	height: 10upx;
	background: #ff4343;
	border-radius: 50%;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.me-top,
.top-img {
	width: 750upx;
	height: 390upx;
	position: relative;
}
.middle-img {
	width: 700upx;
	height: 77upx;
	position: absolute;
	top: 0;
	left: 26upx;
}
.me-info-con {
	position: absolute;
	padding: 0 30upx;
	width: 100%;
	box-sizing: border-box;
}
.uesr-name {
	font-size: 36upx;
	font-weight: bold;
	color: #ffffff;
}
.uesr-phone {
	font-size: 22upx;
	font-weight: 500;
	color: #e4f9ff;
}
.user-icon image {
	width: 102upx;
	height: 102upx;
	border-radius: 50%;
}
.user-bot {
	width: 700upx;
	height: 77upx;
	position: absolute;
	bottom: 0;
}
.user-bot-info {
	width: 100%;
	color: #ffffff;
}
.item-con {
	height: 123upx;
	justify-content: center;
	align-items: center;
}
.item-title {
	font-size: 24upx;
	font-weight: 500;
	color: #fdeed5;
}
.item-num {
	font-size: 32upx;
	font-weight: 500;
	color: #feefb7;
}
.me-cell {
	width: 100%;
}
.row-nav-item-icon1 {
	width: 46upx;
	height: 46upx;
}
.row-nav-item-icon {
	width: 69upx;
	height: 69upx;
}
.row-nav-item-text {
	font-size: 22upx;
	color: #333333;
	line-height: 36upx;
	padding-top: 16upx;
}
</style>
